<template>
  <div>
    <div class="container w">
      <!-- 搜索 -->
      <el-card>
        <el-row :gutter="20">
          <!-- 输入框查找 -->
          <el-col :span="8">
            <el-input
              v-model="queryInfo.keywords"
              placeholder="请输入内容..."
              class="input-with-select"
              clearable
              size="medium"
              @clear="getArticleList"
              @change="getArticleList"
            >
              <el-select slot="prepend" v-model="queryInfo.category_id" placeholder="频道" @change="getArticleList">
                <el-option label="全部" value="" />
                <el-option v-for="item in articleCategoryList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="getArticleList" />
            </el-input>
          </el-col>
          <!-- 状态查找 -->
          <el-col :span="2">
            <el-select v-model="queryInfo.status" clearable placeholder="状态" size="medium" style="right: 5px" @clear="getArticleList" @change="getArticleList">
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <!-- 日期查找 -->
          <el-col :span="13">
            <el-date-picker
              v-model="created_at"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="—"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              size="medium"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="right: 20px"
              @blur="dateBlur"
              @change="change"
            />
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="getArticleList"
            >查询</el-button>
            <el-button
              type="info"
              icon="el-icon-refresh-left"
              size="small"
              @click="queryInfoNull"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-card>
      <!-- 添加or批量删除 -->
      <el-card class="box-card">
        <el-row style="margin: 10px">
          <el-col :span="24">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="$router.push(`/article/published`)"
            >添加文章</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="deleteClick"
            >批量删除</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <!-- 表格 -->
        <el-table
          v-loading="loading"
          :data="articleList"
          style="width: 100%"
          stripe
          lazy
          @selection-change="setSelectRows"
        >>
          <el-table-column type="selection" width="55" />
          <el-table-column label="封面" width="180" align="center">
            <template v-slot="slot">
              <el-image
                :preview-src-list="[slot.row.cover_img]"
                :src="slot.row.cover_img"
              />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="280" />
          <!-- <el-table-column prop="aut_name" label="作者" width="80" align="center">
        </el-table-column> -->
          <el-table-column
            prop="user.user_name"
            label="作者"
            width="80"
            align="center"
          />
          <el-table-column
            prop="category.name"
            label="分类"
            width="80"
            align="center"
          />
          <el-table-column
            prop="read_count"
            label="浏览"
            width="80"
            align="center"
          />
          <el-table-column
            prop="like_count"
            label="点赞"
            width="80"
            align="center"
          />
          <el-table-column
            prop="comment_count"
            label="评论"
            width="80"
            align="center"
          />
          <el-table-column label="状态" width="80" align="center">
            <template v-slot="slot">
              <!-- 0:草稿;1:审核中;2:审核通过;3审核失败;4:回收站) -->
              <el-tag v-if="slot.row.status == 0" type="info">草稿箱</el-tag>
              <el-tag
                v-else-if="slot.row.status == 1"
                type="warning"
              >审核中</el-tag>
              <el-tag
                v-else-if="slot.row.status == 2"
                type="success"
              >审核通过</el-tag>
              <el-tag
                v-else-if="slot.row.status == 3"
                type="danger"
              >审核失败</el-tag>
              <el-tag v-else>回收站</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="发布时间"
            width="160"
            align="center"
          />
          <el-table-column prop="address" label="操作" width="180" align="center">
            <template v-slot="slot">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                @click="$router.push(`/article/published?id=${slot.row.id}`)"
              >编辑</el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                @click="deleteClick(slot.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :disabled="loading"
          background
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getArticleList, deleteArticle, getArticleCategoryList } from '@/api/article'
export default {
  name: 'Article',
  data() {
    return {
      articleList: [], // 文章表格数据
      articleCategoryList: [], // 文章频道
      queryInfo: {
        pageNum: 1, // 分页页码
        pageSize: 10, // 页面数据条数
        category_id: '', // 查询频道
        keywords: '', // 查询标题关键词
        status: '', // 根据状态查找
        begin_pubdate: '', // 起始时间
        end_pubdate: '' // 截止时间
      },
      created_at: [],
      total: 0,
      loading: true,
      selectRows: [], // 全选数据
      // 状态：0:草稿;1:审核中;2:审核通过;3审核失败;)
      status: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 0,
          label: '草稿箱'
        },
        {
          value: 1,
          label: '审核中'
        },
        {
          value: 2,
          label: '审核通过'
        },
        {
          value: 3,
          label: '审核失败'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created() {
    this.getArticleList()
    this.getArticleCategoryList()
  },
  methods: {
    // 点击重置按钮重制搜索数据
    queryInfoNull() {
      this.queryInfo = {
        pageNum: 1, // 分页页码
        pageSize: 10, // 页面数据条数
        category_id: '', // 查询频道
        keywords: '', // 查询标题关键词
        status: '', // 根据状态查找
        begin_pubdate: '', // 起始时间
        end_pubdate: '' // 截止时间
      }
      this.getArticleList()
    },
    // 点击时间的叉就清除日期时间并刷新数据
    change() {
      if (this.queryInfo.begin_pubdate || this.queryInfo.end_pubdate) {
        this.queryInfo.begin_pubdate = ''
        this.queryInfo.end_pubdate = ''
        this.getArticleList()
      }
    },
    // 点击时间就给日期时间赋值并刷新数据
    dateBlur() {
      this.queryInfo.begin_pubdate = this.created_at[0] // 起始时间
      this.queryInfo.end_pubdate = this.created_at[1]// 截止时间
      this.getArticleList()
    },
    // 文章频道数据
    async getArticleCategoryList() {
      const { list } = await getArticleCategoryList()
      this.articleCategoryList = list
      console.log('文章列表===文章分类数据', this.articleCategoryList)
    },
    // 文章表格数据
    async getArticleList() {
      this.loading = true
      const { list, pageNum, pageSize, total } = await getArticleList(
        this.queryInfo
      )
      this.articleList = list
      this.queryInfo.pageNum = Number(pageNum)
      this.queryInfo.pageSize = Number(pageSize)
      this.total = total
      // console.log(list)
      // if (list.length >= 0) {
      this.loading = false
      // }
    },
    // 设置页面数据条数
    handleSizeChange(val) {
      this.queryInfo.pageSize = val
      this.getArticleList()
    },
    // 设置分页页码
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val
      this.getArticleList()
    },
    // 删除用户 or 批量删除
    deleteClick(row) {
      if (row.id) {
        this.$confirm('你确定要删除选中项吗', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            await deleteArticle({ ids: [row.id] })
            this.getArticleList()
            this.$message.success('删除成功')
          })
          .catch(() => {
            this.$message.info('已取消删除')
          })
      } else {
        // 批量删除
        if (!this.selectRows.length) { return this.$message.warning('请选择要删除的选中项') }
        const ids = this.selectRows.map((item) => item.id)
        this.$confirm('你确定要删除选中项吗', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            await deleteArticle({ ids })
            this.getArticleList()
            this.$message.success('删除成功')
          })
          .catch(() => {
            this.$message.info('已取消删除')
          })
      }
    },
    // 全选数据
    setSelectRows(val) {
      this.selectRows = val
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select .el-input {
  width: 80px;
}
.box-card {
  margin: 20px 0;
}
.el-table {
  margin: 20px 0px;
}
.el-image {
  border-radius: 5px;
}

</style>
